<template>
  <view class="book-success-page">
    <!-- 成功图标 -->
    <view class="success-icon">
      <view class="icon-circle">
        <text class="checkmark">✓</text>
      </view>
    </view>
    
    <!-- 成功信息 -->
    <view class="success-info">
      <view class="success-title">预约成功</view>
      <view class="booking-number">预约编号: {{bookingNumber}}</view>
    </view>
    
    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="primary-btn" @click="goHome">返回首页</button>
      <button class="secondary-btn" @click="viewDetails">预约详情</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bookingNumber: '',
      bookingData: null
    }
  },
  
  onLoad(options) {
    // 设置页面标题
    uni.setNavigationBarTitle({
      title: '预约成功'
    });
    
    // 生成预约编号
    this.generateBookingNumber();
    
    // 接收传递的预约数据
    if (options.bookingData) {
      try {
        this.bookingData = JSON.parse(decodeURIComponent(options.bookingData));
      } catch (e) {
        console.error('解析预约数据失败：', e);
      }
    }
  },
  
  methods: {
    // 生成预约编号
    generateBookingNumber() {
      const timestamp = Date.now();
      const random = Math.floor(Math.random() * 10000);
      this.bookingNumber = `${timestamp}${random}`;
    },
    
    // 返回首页
    goHome() {
      // 返回首页（通常是tabBar的第一个页面）
      uni.switchTab({
        url: '/pages/index/index',
        success: () => {
          console.log('返回首页成功');
        },
        fail: (err) => {
          console.error('返回首页失败：', err);
          // 如果switchTab失败，尝试navigateBack
          uni.navigateBack({
            delta: 999 // 返回多级页面
          });
        }
      });
    },
    
    // 查看预约详情
    viewDetails() {
      // 跳转到预约详情页面
      if (this.bookingData) {
        uni.navigateTo({
          url: `/pages/bookDetails/bookDetails?bookingData=${encodeURIComponent(JSON.stringify(this.bookingData))}&bookingNumber=${this.bookingNumber}`,
          success: () => {
            console.log('跳转到预约详情页面成功');
          },
          fail: (err) => {
            console.error('跳转到预约详情页面失败：', err);
            uni.showToast({
              title: '页面跳转失败',
              icon: 'none'
            });
          }
        });
      } else {
        uni.showToast({
          title: '预约数据不存在',
          icon: 'none'
        });
      }
    }
  }
}
</script>

<style scoped>
.book-success-page {
  min-height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 40rpx;
}

/* 成功图标 */
.success-icon {
  margin-bottom: 60rpx;
}

.icon-circle {
  width: 200rpx;
  height: 200rpx;
  background-color: #4CAF50;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(76, 175, 80, 0.3);
}

.checkmark {
  font-size: 120rpx;
  color: #fff;
  font-weight: bold;
}

/* 成功信息 */
.success-info {
  text-align: center;
  margin-bottom: 80rpx;
}

.success-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.booking-number {
  font-size: 28rpx;
  color: #666;
  line-height: 1.4;
}

/* 操作按钮 */
.action-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.primary-btn {
  width: 100%;
  height: 90rpx;
  background-color: #007AFF;
  color: #fff;
  border: none;
  border-radius: 45rpx;
  font-size: 32rpx;
  font-weight: bold;
  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
}

.secondary-btn {
  width: 100%;
  height: 90rpx;
  background-color: #f0f2f5;
  color: #333;
  border: none;
  border-radius: 45rpx;
  font-size: 32rpx;
  font-weight: bold;
}

/* 按钮点击效果 */
.primary-btn:active {
  background-color: #0056CC;
  transform: scale(0.98);
}

.secondary-btn:active {
  background-color: #e0e2e5;
  transform: scale(0.98);
}
</style>
